import { useCallback, useEffect, useRef, useState } from "react";
// 实现自动滚动到底部的功能
export function useScrollToBottom() {
    // useRef 用于引用Dom元素
    const scrollRef = useRef<HTMLDivElement>(null);
    //  创建一个状态 autoScroll 和对应的更新函数 setAutoScroll，初始值为 true。这个状态用于控制是否自动滚动到底部
    const [autoScroll, setAutoScroll] = useState(true);
    // 用于手动触发滚动到底部的操作。
    const scrollToBottom = useCallback(() => {
        const dom = scrollRef.current;
        if (dom) {
            // 浏览器提供的 API，用于在下一次浏览器重绘之前执行指定的函数
            // 这行代码的作用是在下一次浏览器重绘之前执行滚动操作，确保在 DOM 更新后执行，从而获取准确的 scrollHeight 值。这样可以实现将指定的 DOM 元素滚动到底部的效
            requestAnimationFrame(() => dom.scrollTo(0, dom.scrollHeight));
        }
    }, []);

    // auto scroll
    useEffect(() => {
        autoScroll && scrollToBottom();
    });

    return {
        scrollRef,
        autoScroll,
        setAutoScroll,
        scrollToBottom,
    };
}
